<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Data Table | Adminpro - Admin Template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- favicon
		============================================ -->
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
    <!-- Google Fonts
		============================================ -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i,800" rel="stylesheet">
    <!-- Bootstrap CSS

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- Bootstrap CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <!-- adminpro icon CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/adminpro-custon-icon.css}">
    <!-- meanmenu icon CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/meanmenu.min.css}">
    <!-- mCustomScrollbar CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/jquery.mCustomScrollbar.min.css}">
    <!-- animate CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/data-table/bootstrap-table.css}">
    <link rel="stylesheet" th:href="@{/css/data-table/bootstrap-editable.css}">
    <!-- normalize CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <!-- charts CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/c3.min.css}">
    <!-- style CSS
		============================================ -->
    <link rel="stylesheet" href="style.css}">
    <!-- responsive CSS
		============================================ -->
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- modernizr JS
		============================================ -->
    <script th:src="@{/js/vendor/modernizr-2.8.3.min.js}"></script>
</head>

<body class="darklayout">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Header top area start-->
<div class="wrapper-pro">
    <div class="left-sidebar-pro">
        <nav id="sidebar">
            <div class="sidebar-header">
                <a href="#"><img src="img/message/1.jpg" alt=""/>
                </a>
                <h3>Andrar Son</h3>
                <p>Developer</p>
                <strong>AP+</strong>
            </div>
            <div class="left-custom-menu-adp-wrap">
                <ul class="nav navbar-nav left-sidebar-menu-pro">
                    <li class="nav-item">
                        <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                           class="nav-link dropdown-toggle"><i class="fa big-icon fa-home"></i> <span class="mini-dn">Home</span>
                            <span class="indicator-right-menu mini-dn"><i
                                    class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown animated flipInX">
                            <a href="dashboard.html" class="dropdown-item">Dashboard v.1</a>
                            <a href="dashboard-2.html" class="dropdown-item">Dashboard v.2</a>
                            <a href="analytics.html" class="dropdown-item">Analytics</a>
                            <a href="widgets.html" class="dropdown-item">Widgets</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-envelope"></i>
                        <span class="mini-dn">Mailbox</span> <span class="indicator-right-menu mini-dn"><i
                                class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown animated flipInX">
                            <a href="inbox.html" class="dropdown-item">Inbox</a>
                            <a href="view-mail.html" class="dropdown-item">View Mail</a>
                            <a href="compose-mail.html" class="dropdown-item">Compose Mail</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-flask"></i> <span
                            class="mini-dn">Interface</span> <span class="indicator-right-menu mini-dn"><i
                            class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown animated flipInX">
                            <a href="google-map.html" class="dropdown-item">Google Map</a>
                            <a href="data-maps.html" class="dropdown-item">Data Maps</a>
                            <a href="pdf-viewer.html" class="dropdown-item">Pdf Viewer</a>
                            <a href="x-editable.html" class="dropdown-item">X-Editable</a>
                            <a href="code-editor.html" class="dropdown-item">Code Editor</a>
                            <a href="tree-view.html" class="dropdown-item">Tree View</a>
                            <a href="preloader.html" class="dropdown-item">Preloader</a>
                            <a href="images-cropper.html" class="dropdown-item">Images Cropper</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-pie-chart"></i>
                        <span class="mini-dn">Miscellaneous</span> <span class="indicator-right-menu mini-dn"><i
                                class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown animated flipInX">
                            <a href="profile.html" class="dropdown-item">Profile</a>
                            <a href="contact-client.html" class="dropdown-item">Contact Client</a>
                            <a href="contact-client-v.1.html" class="dropdown-item">Contact Client v.1</a>
                            <a href="project-list.html" class="dropdown-item">Project List</a>
                            <a href="project-details.html" class="dropdown-item">Project Details</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-bar-chart-o"></i>
                        <span class="mini-dn">Charts</span> <span class="indicator-right-menu mini-dn"><i
                                class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown chart-left-menu-std animated flipInX">
                            <a href="bar-charts.html" class="dropdown-item">Bar Charts</a>
                            <a href="line-charts.html" class="dropdown-item">Line Charts</a>
                            <a href="area-charts.html" class="dropdown-item">Area Charts</a>
                            <a href="rounded-chart.html" class="dropdown-item">Rounded Charts</a>
                            <a href="c3.html" class="dropdown-item">C3 Charts</a>
                            <a href="sparkline.html" class="dropdown-item">Sparkline Charts</a>
                            <a href="peity.html" class="dropdown-item">Peity Charts</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-table"></i> <span
                            class="mini-dn">Data Tables</span> <span class="indicator-right-menu mini-dn"><i
                            class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown animated flipInX">
                            <a href="static-table.html" class="dropdown-item">Static Table</a>
                            <a href="data-table.html" class="dropdown-item">Data Table</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-edit"></i> <span
                            class="mini-dn">Forms Elements</span> <span class="indicator-right-menu mini-dn"><i
                            class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown form-left-menu-std animated flipInX">
                            <a href="basic-form-element.html" class="dropdown-item">Basic Elements</a>
                            <a href="advance-form-element.html" class="dropdown-item">Advance Elements</a>
                            <a href="password-meter.html" class="dropdown-item">Password Meter</a>
                            <a href="multi-upload.html" class="dropdown-item">Multi Upload</a>
                            <a href="tinymc.html" class="dropdown-item">Text Editor</a>
                            <a href="dual-list-box.html" class="dropdown-item">Dual List Box</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-desktop"></i>
                        <span class="mini-dn">App views</span> <span class="indicator-right-menu mini-dn"><i
                                class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown apps-left-menu-std animated flipInX">
                            <a href="notifications.html" class="dropdown-item">Notifications</a>
                            <a href="alerts.html" class="dropdown-item">Alerts</a>
                            <a href="modals.html" class="dropdown-item">Modals</a>
                            <a href="buttons.html" class="dropdown-item">Buttons</a>
                            <a href="tabs.html" class="dropdown-item">Tabs</a>
                            <a href="accordion.html" class="dropdown-item">Accordion</a>
                            <a href="tab-menus.html" class="dropdown-item">Tab Menus</a>
                        </div>
                    </li>
                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                            class="nav-link dropdown-toggle"><i class="fa big-icon fa-files-o"></i>
                        <span class="mini-dn">Pages</span> <span class="indicator-right-menu mini-dn"><i
                                class="fa indicator-mn fa-angle-left"></i></span></a>
                        <div role="menu" class="dropdown-menu left-menu-dropdown pages-left-menu-std animated flipInX">
                            <a href="login.html" class="dropdown-item">Login</a>
                            <a href="register.html" class="dropdown-item">Register</a>
                            <a href="captcha.html" class="dropdown-item">Captcha</a>
                            <a href="checkout.html" class="dropdown-item">Checkout</a>
                            <a href="contact.html" class="dropdown-item">Contacts</a>
                            <a href="review.html" class="dropdown-item">Review</a>
                            <a href="order.html" class="dropdown-item">Order</a>
                            <a href="comment.html" class="dropdown-item">Comment</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <!-- Header top area start-->
    <div class="content-inner-all">
        <div class="header-top-area">
            <div class="fixed-header-top">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-1 col-md-6 col-sm-6 col-xs-12">
                            <button type="button" id="sidebarCollapse"
                                    class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                <i class="fa fa-bars"></i>
                            </button>
                            <div class="admin-logo logo-wrap-pro">
                                <a href="#"><img src="img/logo/log.png" alt=""/>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-1 col-sm-1 col-xs-12">
                            <div class="header-top-menu tabl-d-n">
                                <ul class="nav navbar-nav mai-top-nav">
                                    <li class="nav-item"><a href="#" class="nav-link">Home</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="nav-link">About</a>
                                    </li>
                                    <li class="nav-item"><a href="#" class="nav-link">Services</a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                           class="nav-link dropdown-toggle">Project <span class="angle-down-topmenu"><i
                                                class="fa fa-angle-down"></i></span></a>
                                        <div role="menu" class="dropdown-menu animated flipInX">
                                            <a href="#" class="dropdown-item">Company Info</a>
                                            <a href="#" class="dropdown-item">Documentation</a>
                                            <a href="#" class="dropdown-item">Expert Backend</a>
                                            <a href="#" class="dropdown-item">Expert FrontEnd</a>
                                            <a href="#" class="dropdown-item">Contact Support</a>
                                        </div>
                                    </li>
                                    <li class="nav-item"><a href="#" class="nav-link">Support</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <div class="header-right-info">
                                <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                    <li class="nav-item dropdown">
                                        <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                           class="nav-link dropdown-toggle"><span
                                                class="adminpro-icon adminpro-chat-pro"></span><span
                                                class="indicator-ms"></span></a>
                                        <div role="menu" class="author-message-top dropdown-menu animated flipInX">
                                            <div class="message-single-top">
                                                <h1>Message</h1>
                                            </div>
                                            <ul class="message-menu">
                                                <li>
                                                    <a href="#">
                                                        <div class="message-img">
                                                            <img src="img/message/1.jpg" alt="">
                                                        </div>
                                                        <div class="message-content">
                                                            <span class="message-date">16 Sept</span>
                                                            <h2>Advanda Cro</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="message-img">
                                                            <img src="img/message/4.jpg" alt="">
                                                        </div>
                                                        <div class="message-content">
                                                            <span class="message-date">16 Sept</span>
                                                            <h2>Sulaiman din</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="message-img">
                                                            <img src="img/message/3.jpg" alt="">
                                                        </div>
                                                        <div class="message-content">
                                                            <span class="message-date">16 Sept</span>
                                                            <h2>Victor Jara</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="message-img">
                                                            <img src="img/message/2.jpg" alt="">
                                                        </div>
                                                        <div class="message-content">
                                                            <span class="message-date">16 Sept</span>
                                                            <h2>Victor Jara</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div class="message-view">
                                                <a href="#">View All Messages</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="nav-item"><a href="#" data-toggle="dropdown" role="button"
                                                            aria-expanded="false" class="nav-link dropdown-toggle"><i
                                            class="fa fa-bell-o" aria-hidden="true"></i><span
                                            class="indicator-nt"></span></a>
                                        <div role="menu" class="notification-author dropdown-menu animated flipInX">
                                            <div class="notification-single-top">
                                                <h1>Notifications</h1>
                                            </div>
                                            <ul class="notification-menu">
                                                <li>
                                                    <a href="#">
                                                        <div class="notification-icon">
                                                            <span class="adminpro-icon adminpro-checked-pro"></span>
                                                        </div>
                                                        <div class="notification-content">
                                                            <span class="notification-date">16 Sept</span>
                                                            <h2>Advanda Cro</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="notification-icon">
                                                            <span class="adminpro-icon adminpro-cloud-computing-down"></span>
                                                        </div>
                                                        <div class="notification-content">
                                                            <span class="notification-date">16 Sept</span>
                                                            <h2>Sulaiman din</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="notification-icon">
                                                            <span class="adminpro-icon adminpro-shield"></span>
                                                        </div>
                                                        <div class="notification-content">
                                                            <span class="notification-date">16 Sept</span>
                                                            <h2>Victor Jara</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#">
                                                        <div class="notification-icon">
                                                            <span class="adminpro-icon adminpro-analytics-arrow"></span>
                                                        </div>
                                                        <div class="notification-content">
                                                            <span class="notification-date">16 Sept</span>
                                                            <h2>Victor Jara</h2>
                                                            <p>Please done this project as soon possible.</p>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div class="notification-view">
                                                <a href="#">View All Notification</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a href="#" data-toggle="dropdown" role="button" aria-expanded="false"
                                           class="nav-link dropdown-toggle">
                                            <span class="adminpro-icon adminpro-user-rounded header-riht-inf"></span>
                                            <span class="admin-name">Advanda Cro</span>
                                            <span class="author-project-icon adminpro-icon adminpro-down-arrow"></span>
                                        </a>
                                        <ul role="menu"
                                            class="dropdown-header-top author-log dropdown-menu animated flipInX">
                                            <li><a href="#"><span
                                                    class="adminpro-icon adminpro-home-admin author-log-ic"></span>My
                                                Account</a>
                                            </li>
                                            <li><a href="#"><span
                                                    class="adminpro-icon adminpro-user-rounded author-log-ic"></span>My
                                                Profile</a>
                                            </li>
                                            <li><a href="#"><span
                                                    class="adminpro-icon adminpro-money author-log-ic"></span>User
                                                Billing</a>
                                            </li>
                                            <li><a href="#"><span
                                                    class="adminpro-icon adminpro-settings author-log-ic"></span>Settings</a>
                                            </li>
                                            <li><a href="#"><span
                                                    class="adminpro-icon adminpro-locked author-log-ic"></span>Log
                                                Out</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item nav-setting-open"><a href="#" data-toggle="dropdown"
                                                                             role="button" aria-expanded="false"
                                                                             class="nav-link dropdown-toggle"><i
                                            class="fa fa-tasks"></i></a>

                                        <div role="menu"
                                             class="admintab-wrap menu-setting-wrap menu-setting-wrap-bg dropdown-menu animated flipInX">
                                            <ul class="nav nav-tabs custon-set-tab">
                                                <li class="active"><a data-toggle="tab" href="#Notes">Notes</a>
                                                </li>
                                                <li><a data-toggle="tab" href="#Projects">Projects</a>
                                                </li>
                                                <li><a data-toggle="tab" href="#Settings">Settings</a>
                                                </li>
                                            </ul>

                                            <div class="tab-content">
                                                <div id="Notes" class="tab-pane fade in active">
                                                    <div class="notes-area-wrap">
                                                        <div class="note-heading-indicate">
                                                            <h2><i class="fa fa-comments-o"></i> Latest Notes</h2>
                                                            <p>You have 10 new message.</p>
                                                        </div>
                                                        <div class="notes-list-area notes-menu-scrollbar">
                                                            <ul class="notes-menu-list">
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/5.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/1.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/2.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/3.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/4.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/5.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/6.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/1.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/2.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="notes-list-flow">
                                                                            <div class="notes-img">
                                                                                <img src="img/notification/3.jpg"
                                                                                     alt=""/>
                                                                            </div>
                                                                            <div class="notes-content">
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more-or-less
                                                                                    normal.</p>
                                                                                <span>Yesterday 2:45 pm</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="Projects" class="tab-pane fade">
                                                    <div class="projects-settings-wrap">
                                                        <div class="note-heading-indicate">
                                                            <h2><i class="fa fa-cube"></i> Latest projects</h2>
                                                            <p> You have 20 projects. 5 not completed.</p>
                                                        </div>
                                                        <div class="project-st-list-area project-st-menu-scrollbar">
                                                            <ul class="projects-st-menu-list">
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Web Development</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">1 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content">
                                                                                <p>Completion with: 28%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 28%;"
                                                                                         class="progress-bar progress-bar-danger"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Software Development</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">2 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content project-rating-cl">
                                                                                <p>Completion with: 68%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 68%;"
                                                                                         class="progress-bar"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Graphic Design</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">3 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content">
                                                                                <p>Completion with: 78%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 78%;"
                                                                                         class="progress-bar"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Web Design</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">4 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content project-rating-cl2">
                                                                                <p>Completion with: 38%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 38%;"
                                                                                         class="progress-bar progress-bar-danger"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Business Card</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">5 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content">
                                                                                <p>Completion with: 28%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 28%;"
                                                                                         class="progress-bar progress-bar-danger"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Ecommerce Business</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">6 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content project-rating-cl">
                                                                                <p>Completion with: 68%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 68%;"
                                                                                         class="progress-bar"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Woocommerce Plugin</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">7 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content">
                                                                                <p>Completion with: 78%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 78%;"
                                                                                         class="progress-bar"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">
                                                                        <div class="project-list-flow">
                                                                            <div class="projects-st-heading">
                                                                                <h2>Wordpress Theme</h2>
                                                                                <p> The point of using Lorem Ipsum is
                                                                                    that it has a more or less
                                                                                    normal.</p>
                                                                                <span class="project-st-time">9 hours ago</span>
                                                                            </div>
                                                                            <div class="projects-st-content project-rating-cl2">
                                                                                <p>Completion with: 38%</p>
                                                                                <div class="progress progress-mini">
                                                                                    <div style="width: 38%;"
                                                                                         class="progress-bar progress-bar-danger"></div>
                                                                                </div>
                                                                                <p>Project end: 4:00 pm - 12.06.2014</p>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div id="Settings" class="tab-pane fade">
                                                    <div class="setting-panel-area">
                                                        <div class="note-heading-indicate">
                                                            <h2><i class="fa fa-gears"></i> Settings Panel</h2>
                                                            <p> You have 20 Settings. 5 not completed.</p>
                                                        </div>
                                                        <ul class="setting-panel-list">
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Show notifications</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu"
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Disable Chat</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu"
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example3">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example3">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Enable history</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu"
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example4">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example4">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Show charts</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu"
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example7">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example7">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Update everyday</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu" checked=""
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example2">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example2">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Global search</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu" checked=""
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example6">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example6">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li>
                                                                <div class="checkbox-setting-pro">
                                                                    <div class="checkbox-title-pro">
                                                                        <h2>Offline users</h2>
                                                                        <div class="ts-custom-check">
                                                                            <div class="onoffswitch">
                                                                                <input type="checkbox"
                                                                                       name="collapsemenu" checked=""
                                                                                       class="onoffswitch-checkbox"
                                                                                       id="example5">
                                                                                <label class="onoffswitch-label"
                                                                                       for="example5">
                                                                                    <span class="onoffswitch-inner"></span>
                                                                                    <span class="onoffswitch-switch"></span>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ul>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Header top area end-->
        <!-- Breadcome start-->
        <div class="breadcome-area mg-b-30 small-dn">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="breadcome-list shadow-reset">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="breadcome-heading">
                                        <h2>Welcome To Adminpro</h2>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <ul class="breadcome-menu">
                                        <li><a href="#">Home</a> <span class="bread-slash">/</span>
                                        </li>
                                        <li><span class="bread-blod">Data Table</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcome End-->
        <!-- Mobile Menu start -->
        <div class="mobile-menu-area">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="mobile-menu">
                            <nav id="dropdown">
                                <ul class="mobile-menu-nav">
                                    <li><a data-toggle="collapse" data-target="#Charts" href="#">Home <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul class="collapse dropdown-header-top">
                                            <li><a href="dashboard.html">Dashboard v.1</a>
                                            </li>
                                            <li><a href="dashboard-2.html">Dashboard v.2</a>
                                            </li>
                                            <li><a href="analytics.html">Analytics</a>
                                            </li>
                                            <li><a href="widgets.html">Widgets</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#demo" href="#">Mailbox <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="demo" class="collapse dropdown-header-top">
                                            <li><a href="inbox.html">Inbox</a>
                                            </li>
                                            <li><a href="view-mail.html">View Mail</a>
                                            </li>
                                            <li><a href="compose-mail.html">Compose Mail</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#others" href="#">Miscellaneous <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="others" class="collapse dropdown-header-top">
                                            <li><a href="profile.html">Profile</a>
                                            </li>
                                            <li><a href="contact-client.html">Contact Client</a>
                                            </li>
                                            <li><a href="contact-client-v.1.html">Contact Client v.1</a>
                                            </li>
                                            <li><a href="project-list.html">Project List</a>
                                            </li>
                                            <li><a href="project-details.html">Project Details</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Miscellaneousmob" href="#">Interface
                                        <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="Miscellaneousmob" class="collapse dropdown-header-top">
                                            <li><a href="google-map.html">Google Map</a>
                                            </li>
                                            <li><a href="data-maps.html">Data Maps</a>
                                            </li>
                                            <li><a href="pdf-viewer.html">Pdf Viewer</a>
                                            </li>
                                            <li><a href="x-editable.html">X-Editable</a>
                                            </li>
                                            <li><a href="code-editor.html">Code Editor</a>
                                            </li>
                                            <li><a href="tree-view.html">Tree View</a>
                                            </li>
                                            <li><a href="preloader.html">Preloader</a>
                                            </li>
                                            <li><a href="images-cropper.html">Images Cropper</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Chartsmob" href="#">Charts <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="Chartsmob" class="collapse dropdown-header-top">
                                            <li><a href="bar-charts.html">Bar Charts</a>
                                            </li>
                                            <li><a href="line-charts.html">Line Charts</a>
                                            </li>
                                            <li><a href="area-charts.html">Area Charts</a>
                                            </li>
                                            <li><a href="rounded-chart.html">Rounded Charts</a>
                                            </li>
                                            <li><a href="c3.html">C3 Charts</a>
                                            </li>
                                            <li><a href="sparkline.html">Sparkline Charts</a>
                                            </li>
                                            <li><a href="peity.html">Peity Charts</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Tablesmob" href="#">Tables <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="Tablesmob" class="collapse dropdown-header-top">
                                            <li><a href="static-table.html">Static Table</a>
                                            </li>
                                            <li><a href="data-table.html">Data Table</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#formsmob" href="#">Forms <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="formsmob" class="collapse dropdown-header-top">
                                            <li><a href="basic-form-element.html">Basic Form Elements</a>
                                            </li>
                                            <li><a href="advance-form-element.html">Advanced Form Elements</a>
                                            </li>
                                            <li><a href="password-meter.html">Password Meter</a>
                                            </li>
                                            <li><a href="multi-upload.html">Multi Upload</a>
                                            </li>
                                            <li><a href="tinymc.html">Text Editor</a>
                                            </li>
                                            <li><a href="dual-list-box.html">Dual List Box</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Appviewsmob" href="#">App views <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="Appviewsmob" class="collapse dropdown-header-top">
                                            <li><a href="basic-form-element.html">Basic Form Elements</a>
                                            </li>
                                            <li><a href="advance-form-element.html">Advanced Form Elements</a>
                                            </li>
                                            <li><a href="password-meter.html">Password Meter</a>
                                            </li>
                                            <li><a href="multi-upload.html">Multi Upload</a>
                                            </li>
                                            <li><a href="tinymc.html">Text Editor</a>
                                            </li>
                                            <li><a href="dual-list-box.html">Dual List Box</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li><a data-toggle="collapse" data-target="#Pagemob" href="#">Pages <span
                                            class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        <ul id="Pagemob" class="collapse dropdown-header-top">
                                            <li><a href="login.html">Login</a>
                                            </li>
                                            <li><a href="register.html">Register</a>
                                            </li>
                                            <li><a href="captcha.html">Captcha</a>
                                            </li>
                                            <li><a href="checkout.html">Checkout</a>
                                            </li>
                                            <li><a href="contact.html">Contacts</a>
                                            </li>
                                            <li><a href="review.html">Review</a>
                                            </li>
                                            <li><a href="order.html">Order</a>
                                            </li>
                                            <li><a href="comment.html">Comment</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Mobile Menu end -->
        <!-- Breadcome start-->
        <div class="breadcome-area mg-b-30 des-none">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="breadcome-list map-mg-t-40-gl shadow-reset">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <div class="breadcome-heading">
                                        <h2>Thanks for Visits</h2>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                                    <ul class="breadcome-menu">
                                        <li><a href="#">Home</a> <span class="bread-slash">/</span>
                                        </li>
                                        <li><span class="bread-blod">Dashboard</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Breadcome End-->
        <!-- Static Table Start -->
        <div class="data-table-area mg-b-15">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="sparkline13-list shadow-reset">
                            <div class="sparkline13-hd">
                                <div class="main-sparkline13-hd">
                                    <h1>Projects <span class="table-project-n">Data</span> Table</h1>
                                    <div class="sparkline13-outline-icon">
                                        <span class="sparkline13-collapse-link"><i class="fa fa-chevron-up"></i></span>
                                        <span><i class="fa fa-wrench"></i></span>
                                        <span class="sparkline13-collapse-close"><i class="fa fa-times"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="sparkline13-graph">
                                <div class="datatable-dashv1-list custom-datatable-overright">
                                    <div id="toolbar">
                                        <select class="form-control">
                                            <option value="">Export Basic</option>
                                            <option value="all">Export All</option>
                                            <option value="selected">Export Selected</option>
                                        </select>
                                    </div>
                                    <table id="table" data-toggle="table" data-pagination="true" data-search="true"
                                           data-show-columns="true" data-show-pagination-switch="true"
                                           data-show-refresh="true" data-key-events="true" data-show-toggle="true"
                                           data-resizable="true" data-cookie="true" data-cookie-id-table="saveId"
                                           data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
                                        <thead>
                                        <tr>
                                            <th data-field="state" data-checkbox="true"></th>
                                            <th data-field="id">ID</th>
                                            <th data-field="name" data-editable="true">Project</th>
                                            <th data-field="email" data-editable="true">Email</th>
                                            <th data-field="phone" data-editable="true">Phone</th>
                                            <th data-field="company" data-editable="true">Company</th>
                                            <th data-field="complete">Completed</th>
                                            <th data-field="task" data-editable="true">Task</th>
                                            <th data-field="date" data-editable="true">Date</th>
                                            <th data-field="price" data-editable="true">Price</th>
                                            <th data-field="action">Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td></td>
                                            <td>1</td>
                                            <td>Web Development</td>
                                            <td>admin@uttara.com</td>
                                            <td>+8801962067309</td>
                                            <td>Aber Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">1/6</span>
                                            </td>
                                            <td>10%</td>
                                            <td>Jul 14, 2018</td>
                                            <td>$5455</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>2</td>
                                            <td>Graphic Design</td>
                                            <td>fox@itpark.com</td>
                                            <td>+8801762067304</td>
                                            <td>Abitibi Inc.</td>
                                            <td class="datatable-ct"><span class="pie">230/360</span>
                                            </td>
                                            <td>70%</td>
                                            <td>fab 2, 2018</td>
                                            <td>$8756</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>3</td>
                                            <td>Software Development</td>
                                            <td>gumre@hash.com</td>
                                            <td>+8801862067308</td>
                                            <td>Acambis plc</td>
                                            <td class="datatable-ct"><span class="pie">0.42/1.461</span>
                                            </td>
                                            <td>5%</td>
                                            <td>Seb 5, 2018</td>
                                            <td>$9875</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>4</td>
                                            <td>Woocommerce</td>
                                            <td>kyum@frok.com</td>
                                            <td>+8801962066547</td>
                                            <td>ACLN Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Oct 10, 2018</td>
                                            <td>$3254</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>5</td>
                                            <td>Joomla</td>
                                            <td>jams@game.com</td>
                                            <td>+8801962098745</td>
                                            <td>ACS-Tech Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">200,133</span>
                                            </td>
                                            <td>80%</td>
                                            <td>Nov 20, 2018</td>
                                            <td>$58745</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>6</td>
                                            <td>Wordpress</td>
                                            <td>flat@yem.com</td>
                                            <td>+8801962254781</td>
                                            <td>ActFits.com Inc.</td>
                                            <td class="datatable-ct"><span class="pie">0.42,1.051</span>
                                            </td>
                                            <td>30%</td>
                                            <td>Aug 25, 2018</td>
                                            <td>$789879</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>7</td>
                                            <td>Ecommerce</td>
                                            <td>hasan@wpm.com</td>
                                            <td>+8801962254863</td>
                                            <td>ActivCard S.A.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>July 17, 2018</td>
                                            <td>$21424</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>8</td>
                                            <td>Android Apps</td>
                                            <td>ATM@devep.com</td>
                                            <td>+8801962875469</td>
                                            <td>Adecco S.A.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>June 11, 2018</td>
                                            <td>$78978</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>9</td>
                                            <td>Prestashop</td>
                                            <td>presta@Prest.com</td>
                                            <td>+8801962067524</td>
                                            <td>AEGON N.V.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>May 9, 2018</td>
                                            <td>$45645</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>10</td>
                                            <td>Game Development</td>
                                            <td>Dev@game.com</td>
                                            <td>+8801962067457</td>
                                            <td>Aerco Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>April 5, 2018</td>
                                            <td>$4564545</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>11</td>
                                            <td>Angular Js</td>
                                            <td>gular@angular.com</td>
                                            <td>+8801962067124</td>
                                            <td>Agrium Inc.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Dec 1, 2018</td>
                                            <td>$645455</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>12</td>
                                            <td>Opencart</td>
                                            <td>open@cart.com</td>
                                            <td>+8801962067587</td>
                                            <td>Air Canada</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Jan 6, 2018</td>
                                            <td>$78978</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>13</td>
                                            <td>Education</td>
                                            <td>john@example.com</td>
                                            <td>+8801962067471</td>
                                            <td>Alcan Inc.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Feb 6, 2016</td>
                                            <td>$456456</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>14</td>
                                            <td>Construction</td>
                                            <td>mary@example.com</td>
                                            <td>+8801962012457</td>
                                            <td>Alcatel</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Jan 6, 2016</td>
                                            <td>$87978</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>15</td>
                                            <td>Real Estate</td>
                                            <td>july@example.com</td>
                                            <td>+8801962067309</td>
                                            <td>Alstom</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Dec 1, 2016</td>
                                            <td>$454554</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>16</td>
                                            <td>Personal Regume</td>
                                            <td>john@example.com</td>
                                            <td>+8801962067306</td>
                                            <td>Altarex Corp.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>May 9, 2016</td>
                                            <td>$564555</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>17</td>
                                            <td>Admin Template</td>
                                            <td>mary@example.com</td>
                                            <td>+8801962067305</td>
                                            <td>Alvarion Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>June 11, 2016</td>
                                            <td>$454565</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>18</td>
                                            <td>FrontEnd</td>
                                            <td>july@example.com</td>
                                            <td>+8801962067304</td>
                                            <td>Amcor Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>May 9, 2015</td>
                                            <td>$456546</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>19</td>
                                            <td>Backend</td>
                                            <td>john@range.com</td>
                                            <td>+8801962067303</td>
                                            <td>Amdocs Ltd.</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Feb 9, 2014</td>
                                            <td>$564554</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>20</td>
                                            <td>Java Advance</td>
                                            <td>lamon@ghs.com</td>
                                            <td>+8801962067302</td>
                                            <td>Amersham plc</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>July 6, 2014</td>
                                            <td>$789889</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>21</td>
                                            <td>Jquery Advance</td>
                                            <td>hasad@uth.com</td>
                                            <td>+8801962067301</td>
                                            <td>Amvescap plc</td>
                                            <td class="datatable-ct"><span class="pie">2,7</span>
                                            </td>
                                            <td>15%</td>
                                            <td>Jun 6, 2013</td>
                                            <td>$4565656</td>
                                            <td class="datatable-ct"><i class="fa fa-check"></i>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Static Table End -->
    </div>
</div>
<!-- Footer Start-->
<div class="footer-copyright-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="footer-copy-right">
                    <p>Copyright &#169; 2018 Colorlib All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer End-->
<!-- Chat Box Start-->
<div class="chat-list-wrap">
    <div class="chat-list-adminpro">
        <div class="chat-button">
            <span data-toggle="collapse" data-target="#chat" class="chat-icon-link"><i
                    class="fa fa-comments"></i></span>
        </div>
        <div id="chat" class="collapse chat-box-wrap shadow-reset animated zoomInLeft">
            <div class="chat-main-list">
                <div class="chat-heading">
                    <h2>Messanger</h2>
                </div>
                <div class="chat-content chat-scrollbar">
                    <div class="author-chat">
                        <h3>Monica <span class="chat-date">10:15 am</span></h3>
                        <p>Hi, what you are doing and where are you gay?</p>
                    </div>
                    <div class="client-chat">
                        <h3>Mamun <span class="chat-date">10:10 am</span></h3>
                        <p>Now working in graphic design with coding and you?</p>
                    </div>
                    <div class="author-chat">
                        <h3>Monica <span class="chat-date">10:05 am</span></h3>
                        <p>Practice in programming</p>
                    </div>
                    <div class="client-chat">
                        <h3>Mamun <span class="chat-date">10:02 am</span></h3>
                        <p>That's good man! carry on...</p>
                    </div>
                </div>
                <div class="chat-send">
                    <input type="text" placeholder="Type..."/>
                    <span><button type="submit">Send</button></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Chat Box End-->
<div th:replace="common/commonJS::common_js(~{::script})"></div>
<!-- counterup JS
    ============================================ -->
<script th:src="@{/js/counterup/jquery.counterup.min.js}"></script>
<script th:src="@{/js/counterup/waypoints.min.js}"></script>
<!-- peity JS
    ============================================ -->
<script th:src="@{/js/peity/jquery.peity.min.js}"></script>
<script th:src="@{/js/peity/peity-active.js}"></script>
<!-- sparkline JS
    ============================================ -->
<script th:src="@{/js/sparkline/jquery.sparkline.min.js}"></script>
<script th:src="@{/js/sparkline/sparkline-active.js}"></script>

<div th:replace="common/commonJS::common_js_table(~{::script})"></div>
<!-- main JS
    ============================================ -->
<script th:src="@{/js/main.js}"></script>


</body>

</html>
